<template>
	<view class="content">
		<view class="ziliaotitle">个人资料</view>
		<view class="item">
			<text class="txt">头像</text>
			<view class="rightmore">				
				<image v-if="userinfo.avatar_file == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
				<image v-else class="face" :src="'https://www.yedushu.cn/' + userinfo.avatar_file"></image>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setnick()">
			<text class="txt">昵称</text>
			<view class="rightmore">
				<text class="text">{{userinfo.user_name}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setsex()">
			<text class="txt">性别</text>
			<view class="rightmore">
				<text class="text">{{sex}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setqianming()">
			<text class="txt">签名</text>
			<view class="rightmore">
				<text class="bktext">关于我</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setcity()">
			<text class="txt">常居地</text>
			<view class="rightmore">
				<text class="text">{{sheng}}-{{shi}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setshengri()">
			<text class="txt">生日</text>
			<view class="rightmore">
				<text class="text">{{birthday}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="uline"></view>
		<view class="ziliaotitle" style="padding: 15px 0;">帐号设置</view>
		<view class="item" @click="setmima()">
			<text class="txt">设置密码</text>
			<image class="more" src="../../static/images/ic_arrow_right.png"></image>
		</view>
		<view class="item">
			<text class="txt">手机号</text>
			<view class="rightmore">
				<text class="text">{{userinfo.mobile}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item" @click="setemail()">
			<text class="txt">邮箱</text>
			<view class="rightmore">
				<text class="text">{{userinfo.email}}</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
		<view class="item">
			<text class="txt">微信</text>
			<view class="rightmore">
				<text class="bktext" v-if="userinfo.wxopenid != null || userinfo.wxopenid != ''">已绑定</text>
				<text class="bktext" v-else>去绑定</text>
				<image class="more" src="../../static/images/ic_arrow_right.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import formatDate from '../../components/formatDate/formatDate.js';
	export default {
		data() {
			return {
				haslogin: false, // 是否登录
				userinfo: [], // 用户信息
				sex: '',
				birthday: '', // 用户生日
				sheng: '',
				shi: ''
			}
		},
		onShow() {
			// 监听设置昵称页面（setnick.vue）传过来的事件，更新用户昵称显示
			uni.$on("setnick", res => {
			    this.userinfo.user_name = res.username;
			    // 移除全局自定义事件监听器
			    // uni.$off('setnick');
			});
			
			// 监听设置性别页面（setsex.vue）传过来的事件，更新性别显示
			uni.$on("setsex", res => {
			    this.sex = res.setsex;
			    // 移除全局自定义事件监听器
			    uni.$off('setsex');
			});
			
			// 监听设置城市页面（subcity.vue）传过来的事件，更新城市显示
			uni.$on("setcity", res => {
			    this.sheng = res.sheng;
				this.shi = res.shi;
			    // 移除全局自定义事件监听器
			    // uni.$off('setcity');
			});
			
			// 监听设置用户个性签名页面（setqianming.vue）传过来的事件，更新个性签名
			uni.$on("setqianming", res => {
			    this.userinfo.attrib.signature = res.qianming;
			    // 移除全局自定义事件监听器
			    uni.$off('setqianming');
			});
			
			// 监听设置用户生日页面（setshengri.vue）传过来的事件，更新生日
			uni.$on("setshengri", res => {
			    this.birthday = res.shengri;
			    // 移除全局自定义事件监听器
			    uni.$off('setshengri');
			});
			
			// 监听设置用户信箱页面（setshengri.vue）传过来的事件，更新用户信箱
			uni.$on("setemail", res => {
			    this.userinfo.email = res.email;
			    // 移除全局自定义事件监听器
			    uni.$off('setemail');
			});
		},
		onLoad() {
			this.haslogin = uni.getStorageSync('haslogin');
			this.userinfo = uni.getStorageSync('userinfo');
			console.log(JSON.stringify(this.userinfo));
			if(this.userinfo.sex == 1)
			{
				this.sex = '男';
			}
			if(this.userinfo.sex == 2)
			{
				this.sex = '女';
			}
			this.sheng = this.userinfo.province;
			this.shi = this.userinfo.city;
			this.birthday = formatDate(this.userinfo.birthday);
		},
		methods: {
			setnick() {
				// 设置昵称
				uni.navigateTo({
				    url: './setnick?username=' + this.userinfo.user_name + '&uid=' + this.userinfo.uid
				});
			},
			setshengri() {
				// 设置生日
				uni.navigateTo({
				    url: './setshengri?birthday=' + this.birthday + '&uid=' + this.userinfo.uid
				});
			},
			setmima() {
				// 设置密码
				uni.navigateTo({
				    url: './setmima?uid=' + this.userinfo.uid
				});
			},
			setemail() {
				// 设置信箱
				uni.navigateTo({
				    url: './setemail?email=' + this.userinfo.email + '&uid=' + this.userinfo.uid
				});
			},
			setqianming() {
				// 设置签名
				uni.navigateTo({
				    url: './setqianming?uid=' + this.userinfo.uid + '&signature=' + this.userinfo.attrib.signature
				});
			},
			setsex() {
				// 设置性别
				uni.navigateTo({
				    url: './setsex?sex=' + this.sex + '&uid=' + this.userinfo.uid
				});
			},
			setcity() {
				// 设置城市
				uni.navigateTo({
				    url: './setcity?uid=' + this.userinfo.uid
				});
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
	}
	.ziliaotitle {
		font-size: 14px;
		color: #b2b2b2;
	}
	.item .rightmore {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
	}
	.item .txt {
		font-size: 16px;
	}
	.item .face {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.item .more {
		width: 10px;
		height: 15px;
		padding-left: 10px;
	}
	.item .text {
		font-size: 15px;
		color: #828282;
	}
	.uline {
		padding: 15px 0;
		border-bottom: #e0e0e0 1px solid;
	}
	.bktext {
		background-color: #e6f8ea;
		padding: 3px 9px;
		font-size: 13px;
		color: #00CC33;
		border-radius: 5px;
	}
</style>
